.log-item
    border-top: 1px solid #4a4a4a
    padding: 8px 8px
    display: flex
    flex-direction: column

    &:first-child
        border-top: none

.log-header
    display: flex
    align-items: flex-start

.log-title
    flex-grow: 1

.log-output
    margin-left: 26px
    margin-top: 2px
    font-style: italic

.status-success
    color: #e09f3e

.status-info
    color: #c9c9c9

.status-modified
    color: #e09f3e

.agent-ha-container
  height: -webkit-fill-available
  display: flex
  font-family: 'SpaceGrotesk'
  font-size: 14px
  flex-direction: column
  justify-content: space-between
  padding: 8px

  textarea
    width: -webkit-fill-available !important
    margin-left: 0px !important
    margin-bottom: 0px !important
    padding-left: 8px !important
    max-height: 12rem !important
    resize: none
    font-size: 14px
    font-family: inherit !important
    overflow-y: auto !important
    overflow-x: hidden !important
    white-space: pre-wrap !important
    border-radius: 8px !important
    padding: 4px
    border: 0px !important
    background: SECONDARY_BASE !important


    &::-webkit-scrollbar-corner
      background-color: SECONDARY_BASE !important

    &::-webkit-scrollbar
      width: 8px !important
      height: 8px !important

    &::-webkit-scrollbar-thumb:vertical,
    &::-webkit-scrollbar-thumb:horizontal
      border: 2px solid SECONDARY_BASE !important

  .agent-command-input
    color: #A5F3FC !important

    &::placeholder
      color: #a5f3fc

    &:focus
      // border: 1px solid #0E7490 !important
      outline: 0px !important

.agent-buttons-container
  display: flex
  justify-content: space-between
  align-items: center

  .agent-button
    display: flex
    cursor: pointer
    background: ACTIVE_ROW
    padding: 4px
    align-items: center
    border-radius: 6px
    padding-right: 8px
    white-space: nowrap
    height: 28px
    margin-right: 6px

    .add-file-img
      background-image: COMMAND_PALETTE_ADD_FILE_IMG
      background-size: 10px, 16px
      background-position: center
      background-repeat: no-repeat
      width: 28px
      height: 28px
      margin-right: 4px

  .agent-model-select
    width: -webkit-fill-available
    display: flex
    justify-content: space-between
    padding-right: 0px !important

  .agent-start-button
    height: 28px
    min-width: 28px
    border-radius: 6px
    background-color: #0E7490
    background-image: COMMAND_PALETTE_START_MSG_IMG
    background-repeat: no-repeat
    background-size: 16px
    background-position: center
    cursor: pointer

    &:hover
      background-color: #0891b2 !important

  .agent-stop-button
    height: 28px
    min-width: 28px
    border-radius: 6px
    background-color:#b91c1c
    background-image: COMMAND_PALETTE_STOP_MSG_IMG
    background-repeat: no-repeat
    background-size: 16px
    background-position: center
    cursor: pointer

    &:hover
      background-color: #dc2626 !important

.agent-model-img
  height: 24px
  min-width: 24px
  background-image: COMMAND_PALETTE_ARROW_IMG
  background-repeat: no-repeat
  background-size: 9px, 6px
  background-position: center

.agent-com
  height: -webkit-fill-available
  overflow-y: auto
  margin-bottom: 8px

.user-img
  height: 24px
  width: 24px
  background-image: COMMAND_PALETTE_USER_IMG
  background-size: 16px, 16px
  background-position: center
  background-repeat: no-repeat

.header-wrapper
  display: flex
  justify-content: space-between
  border-bottom: 2px solid AGENT_BACKGROUND
  padding: 8px
  padding-top: 6px
  padding-bottom: 6px
  align-items: center

.content-header
  display: flex
  align-items: center

.agent-msg-wrapper
  border: 2px solid AGENT_BACKGROUND
  border-radius: 4px
  background: ACTIVE_MENU_BACKGROUND
  margin-bottom: 8px

.user-name
  margin-left: 4px
  margin-right: 4px

.ai-msg
  padding: 8px
  margin-bottom: 8px

.msg-content
  padding: 12px
  display: flex
  flex-direction: column

.ai-img
  height: 24px
  width: 24px
  background-image: COMMAND_PALETTE_AI_IMG
  background-size: 24px, 24px
  background-position: center
  background-repeat: no-repeat

.ai-name
  margin-left: 4px
  margin-right: 4px

.command-palette-copy-button
  height: 24px
  width: 24px
  cursor: pointer
  background-image: COMMAND_PALETTE_COPY_IMG
  background-size: 17px, 17px
  background-position: center
  background-repeat: no-repeat

.command-palette-upload-button
  height: 24px
  width: 24px
  cursor: pointer
  background-image: COMMAND_PALETTE_UPLOAD_IMG
  background-size: 17px, 16px
  background-position: center
  background-repeat: no-repeat

.command-palette-redo-button
  height: 24px
  width: 24px
  cursor: pointer
  background-image: COMMAND_PALETTE_REDO_IMG
  background-size: 17px, 15px
  background-position: center
  background-repeat: no-repeat

.command-palette-edit-button
  height: 24px
  width: 24px
  cursor: pointer
  background-image: COMMAND_PALETTE_EDIT_IMG
  background-size: 17px, 17px
  background-position: center
  background-repeat: no-repeat

.msg-controls
  display: flex

.component-wrapper
  background: SECONDARY_BASE
  border-radius: 4px
  margin-top: 8px
  color: DROPDOWN_TEXT_COLOR

  .header-wrapper
    background: TOOLTIP_BACKGROUND
    border-top-right-radius: 6px
    border-top-left-radius: 6px
    border-bottom: 0px !important

.editor-wrapper
  height: 100%
  margin-top: 8px

.agent-editor
  min-height: 250px
  max-height: 250px
  height: 250px

  .line-numbers
    height: -webkit-fill-available

.agent-interaction
  border: 1px solid #0E7490
  background: SECONDARY_BASE
  border-radius: 8px
  padding: 8px

.prompt-wrapper
  background: TOOLTIP_BACKGROUND
  border-radius: 6px
  display: flex
  flex-direction: column
  margin-top: 8px
  margin-bottom: 8px
  padding: 12px

  .password-wrapper
    display: flex

    .password-prompt-input
      margin-right: 8px
      background-image: none !important
      margin-left: 0px !important
      margin-bottom: 0px !important
      padding-left: 8px !important
      background: #2C2C2C

    .password-continue-button
      padding-left: 16px
      padding-right: 16px
      background: CT_PRIMARY_DEFAULT
      border-radius: 6px
      height: 28px
      display: flex
      align-items: center
      cursor: pointer

      &:hover
        opacity: 0.7

  .header-wrapper
    border-bottom: 0px !important
    padding: 0px !important
    padding-bottom: 16px !important

  .user-options-wrapper
    display: flex
    flex-direction: row

    .user-option
      padding: 16px
      padding-top: 4px
      padding-bottom: 4px
      border-radius: 6px
      width: fit-content
      background: DEBUG_BUTTON_ACTIVE_BACKGROUND
      margin-right: 8px
      cursor: pointer

      &:hover
        opacity: 0.7

.ai-status
  background-image: AI_LOADING_ANIMATION
  background-position-y: 70%
  background-size: 12px, 12px
  width: 28px
  height: 28px
  background-repeat: no-repeat

